<template>
  <div>
      分类
      <p>商品列表</p>
      <p v-for="(item, index) in list" :key="index">
        <router-link :to="'/detail?name='+item.name+'&price='+item.price">{{item.name}}</router-link>
        <!-- <router-link :to="{path: '/detail', query: {name: item.name,price: item.price}}">{{item.name}}</router-link> -->
        <button @click="jump(index)">查看详情</button>
      </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品列表的数据
      list: [
        {name: 'iphone', price: 6999},
        {name: 'xiaomi', price: 5999},
        {name: 'vivo', price: 4999},
      ]
    }
  },
  methods: {
    // 编程式导航，跳转到动态路由的页面
    jump(index) {
      // 通过path跳转
      // this.$router.push('/path: '/goodsdetail/'+this.list[index].name+'/'+this.list[index].price)
      this.$router.push({
        // 格式要和路由中的保持一致
        path: '/goodsdetail/'+this.list[index].name+'/'+this.list[index].price,
      })
      // 命名路由：通过name跳转,与通过path跳转是等效的。适用于path很长，name很短的场景
      // this.$router.push({
      //   name: 'de',
      //   query: {
      //     name: this.list[index].name,
      //     price: this.list[index].price
      //   }
      // })
    }
  }
}
</script>

<style>

</style>